<template>
	<view>
		<zero-loading v-if="loading" :mask="true" type="pulse"></zero-loading>
		<view>
			<view class="timePos">
				<!--学生选择-->
				<checkbox-group class="checkbox" style="margin-bottom:20rpx; padding-left: 20rpx;">
					<label style="display: flex;flex-direction: row; color:#8F8F94" @click="checkBtnCheck()">
						<checkbox class="leaveCheck" :checked="checkStatusBtn" />全选
					</label>
				</checkbox-group>
				
				<view v-for="(item,index) in dormitoryAttendanceArr" :key="index">
					<checkbox-group class="checkbox" style="margin-bottom:20rpx; padding-left: 20rpx;" @change="changeFun($event,item)">
						<label style="display: flex;flex-direction: row; color:#8F8F94" @click="checkOnclick(item)">
							<checkbox class="leaveCheck" value="yes" :disabled="item.disStatus"
								:checked="item.checkBtn"></checkbox>
							<view style="width:120rpx; font-size: 28rpx;" :class="[{'itemIsshow':item.isShow}]">
								{{item.studentName}}
							</view>
						</label>
					</checkbox-group>
				</view>
				
				<!--学生基本信息-->
				<view class="displayStudentInfo">
					<view>
						<view style="width: 100%; display: flex; align-items: center;justify-content: center; ">
							<view style="width: 10%; height: 5rpx; background-color: #ddd;" class=""></view>
							<view style="padding: 10rpx; font-size: 24rpx; color: #aaa;">学员基本信息</view>
							<view style="width: 10%; height: 5rpx; background-color: #ddd;" class=""></view>
						</view>
						<view style="padding: 40rpx 0 40rpx 20rpx; display: flex;">
				
							<image style="width: 180rpx; height: 250rpx;"
								@click="clickImg(JSON.stringify(displayArr[0]))"
								:src="displayArr[0].stuPhoto ? displayArr[0].stuPhoto :'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png' "
								mode="">
							</image>
							<view style="margin-left: 40rpx; font-size: 24rpx;color: #aaa; margin-top: -20rpx;"
								class="">
								<view style="padding: 8rpx;">
									姓名：{{displayArr[0].studentName}}
								</view>
								<view style="padding: 8rpx;">
									性别：{{displayArr[0].sex}}
								</view>
								<view style="padding: 8rpx;">
									班级：{{displayArr[0].className}}
								</view>
								<view style="padding: 8rpx;">
									班主任：{{displayArr[0].classTeacher}}
								</view>
								<view style="padding: 8rpx;">
									电话：{{displayArr[0].teacherPhone}}
								</view>
								<view style="padding: 8rpx;">
									床位：{{displayArr[0].bedNo}}
								</view>
							</view>
				
						</view>
					</view>
				</view>
				
			</view>
	<!-- 		<view v-for="(item,index) in studentInfoList" :key="item.id" style="display: flex; margin: 10rpx; padding: 10rpx; border: 1px solid #9e9e9e;">
				<view class="">
					<image style="width: 200rpx; height: 250rpx;" @click="clickImg(item.stuPhoto)"
						:src="item.stuPhoto" mode=""></image>
				</view>
				<view style="margin-left: 80rpx;display: flex; flex-direction: column; justify-content: space-around;">
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">宿舍号：</view>
						<view class="character">{{item.dormitoryName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">姓名：</view>
						<view class="character">{{item.studentName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">性别：</view>
						<view class="character">{{item.sex == 0 ?"男" :"女"}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">班级：</view>
						<view class="character">{{item.className}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任：</view>
						<view class="character">{{item.teacherName}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任电话：</view>
						<view class="character">{{item.teacherPhone}}</view>
					</view>
				</view>
			</view> -->

			<view style="padding: 20rpx 25rpx 0rpx;">新增违纪详情</view>
			<view style="padding: 10rpx 20rpx;">
			<!-- 	<view style="display: flex; align-items: center; justify-content: space-around; padding: 40rpx 0rpx;">
					<view style="display: flex; align-items: center; font-size: 24rpx;">违纪类型： <uni-data-select
							v-model="violationType" :localdata="violationTypeList" @change="changeType"
							placeholder="选择违纪类型" :clear="false"></uni-data-select>
					</view>
					<view style="display: flex; align-items: center; font-size: 24rpx;">违纪详情： <uni-data-select
							v-model="violationDetil" :localdata="typeDetailList" @change="changeDetail"
							placeholder="选择违纪详情" :clear="false"></uni-data-select>
					</view>
				</view> -->
				<view class="repCheckout">
					<checkbox-group style="width: 33%;" v-for="(item,index) in violationContent" :key="index">
						<label @click="checkFun(item)">
							<checkbox :checked="item.state" class="leaveCheck" value="yes">{{item.dictLabel}}</checkbox>
						</label>
					</checkbox-group>
				</view>
				<uni-easyinput v-model="inpVioDetail" placeholder="请填写违纪详情内容" type="textarea"></uni-easyinput>
			</view>

			<!-- <view style="width: 50%; border: 1rpx #000 dashed;"></view> -->
			<view style="padding: 20rpx 25rpx 0rpx;">违纪照片</view>
			<view style="padding: 20rpx 25rpx 0rpx;">
				<uni-file-picker limit="9" @select="selectImages" @delete="deleteImages"
					v-model="Images"></uni-file-picker>
				<!-- <uni-file-picker limit="5" @delete="deletePhoto" @select="select" file-mediatype="image"
					style="margin-top: 50rpx;" v-model="imageValue"></uni-file-picker> -->
			</view>

			<view style="display: flex; margin-top: 100rpx;justify-content:space-around;">
				<view class="cancel" @click="cancelSubmit">取 消</view>
				<view class="tijiao" @click="openPopup">提 交</view>
			</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff">
			<view style="text-align: center; padding: 20rpx; color: red;">下列学生违纪信息已提交</view>
			<view class="text-box" style="width: 40vh; padding: 60rpx 20rpx; ">
				<text>{{text}}</text>
			</view>
			<view>
				<button @click="maskClick">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import violation from "@/api/modules/violation.js"
	import teachClass from "@/api/modules/teachClass.js"
	export default {
		data() {
			return {
				extraLine: [],
				text: '',
				topName: "违纪情况",
				userName: "",
				buildNo: "",
				storey: "",
				dormitoryNo: "",
				studentInfoList: [],
				studentInfo: {},
				violationContent: [],
				violationTypeList: [{
						value: "small_violation",
						text: "轻微违纪",
					},
					{
						value: "ordinary_violation",
						text: "一般违纪",
					},
					{
						value: "serious_violation",
						text: "重大违纪",
					}
				],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				violationType: "",
				violationDetil: "",
				inpVioDetail: "",
				imageValue: [],
				mendCardPhoto: "",
				loading: false,
				typeDetailList: [],
				detailLabel: "",
				uploadImageList: [],
				Images: [],
				enrollImages: "",
				dormitoryAttendanceArr: [],
				displayArr: [],
				checkStatusBtn: false
			}
		},
		methods: {
			//根据宿舍id查询宿舍学生考勤信息
			getAppStudentListByDId() {
				this.$api.dormitory.getAppStudentListByDId(this.dormitoryId, this.$date).then(res => {
					this.dormitoryAttendanceArr = res.data
					this.dormitoryAttendanceArr.forEach((item, index) => {
						item.isShow = false
						item.checkBtn = false
					
						if (this.roleName == '部门经理') {
							item.disStatus = true
						} else {
							item.disStatus = false
						}
					
						if (item.attenceStatus == 1) {
							item.checkBtn = true
						}
						if (item.attenceStatus == 4) {
							item.leave = true
							item.disStatus = true
						}
					})
					
					this.dormitoryAttendanceArr[0].isShow = true
					this.getAppStuInfoById(res.data[0].studentNo)
				})
			},
			getAppStuInfoById(studentNo) {
				this.$api.dormitory.getAppStuInfoById(studentNo, this.$date).then(res => {
					this.displayArr = res.data
				})
			},
			maskClick() {
				uni.navigateBack({
				        delta: 1 // 默认值是1，表示返回的页面层数
				});
			},
			deleteImages(e) {
				console.log(e.tempFile.uuid)
				this.uploadImageList = this.uploadImageList.filter(item => {
					if (e.tempFile.uuid != item.uuid) {
						return item
					}
				})
				this.enrollImages = ""
				this.uploadImageList.forEach(item => {
					this.enrollImages += item.uploadImages + ","
				})
				console.log(this.enrollImages)
			},
			checkFun(item) {
				item.state = !item.state
			},
			selectImages(e) {
				const tempFilePaths = e.tempFilePaths;
				let token = uni.getStorageSync("token")
				const _this = this
				uni.uploadFile({
					url: uni.url + 'common/uploadFile', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					header: {
						Authorization: "Bearer " + uni.getStorageSync("token"),
					},
					name: 'file',
					success: (uploadFileRes) => {
						let obj = {}
						obj.uuid = e.tempFiles[0].uuid
						const jsonData = JSON.parse(uploadFileRes.data)
						console.log("jsonData", jsonData)
						if (jsonData.status == 200) {
							obj.uploadImages = jsonData.data
						}
						this.uploadImageList.push(obj)
						this.enrollImages = ""
						this.uploadImageList.forEach(item => {
							this.enrollImages += item.uploadImages + ","
						})
						console.log(this.enrollImages)
					}
				});
			},
			select(e) {
				uni.uploadFile({
					url: uni.url + 'common/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test',
					},
					header: {
						Authorization: "Bearer " + uni.getStorageSync("token"),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						this.mendCardPhoto = JSON.parse(uploadFileRes.data).data
						console.log(this.mendCardPhoto)
					}
				});
			},
			// 提交按钮
			openPopup() {
				if (this.detailLabel == '其他') {
					if (!this.inpVioDetail) {
						uni.showToast({
							title: "请填写违纪详情内容",
							icon: "none"
						})
						return
					}
				}
				this.violationIds = new Array();
				this.violationContent.forEach((item, index) => {
					if (item.state) {
						this.violationIds.push(item.dictLabel)
					}
				})
				let violationTypeIds = this.violationIds.join(",")
				this.studentInfoList = []
				this.dormitoryAttendanceArr.forEach((item, index) => {
					if (item.checkBtn == true) {
						
						item.applyId = "sdViolationFlow"
						item.violationTypeDetail = violationTypeIds
						item.violationReason = this.inpVioDetail
						item.violationType = this.violationType
						item.createBy = this.userName
						item.violationImg = this.enrollImages.slice(0, -1)
						
						this.extraLine.push(item.className + " " + item.studentName)
						this.studentInfoList.push(item)
					} 
				})
				
				// this.studentInfoList.forEach((item, index) => {
				// 	item.applyId = "sdViolationFlow"
				// 	item.violationTypeDetail = violationTypeIds
				// 	item.violationReason = this.inpVioDetail
				// 	item.violationType = this.violationType
				// 	item.createBy = this.userName
				// 	item.violationImg = this.enrollImages.slice(0, -1)
					
				// 	this.extraLine.push(item.className + " " + item.studentName)
				// })
				this.loading = true
	
				violation.createApply(this.studentInfoList).then(res => {
					this.loading = false
					
					this.text = this.extraLine.join("\n")
					// 提交成功之后弹框提示
					this.$refs.popup.open()
				}).catch(e => {
					this.loading = false
					uni.showToast({
						title: "提交失败，请重试。",
						icon: "none"
					})
				})
			},
			// 取消按钮
			cancelSubmit() {
				uni.navigateBack({
				        delta: 1 // 默认值是1，表示返回的页面层数
				});
			},
			// 选择违纪详情
			changeDetail(e) {
				console.log(e)
				console.log(this.typeDetailList)
				this.typeDetailList.forEach(item => {
					if (e == item.value) {
						this.detailLabel = item.text
					}
				})
			},
			// 选择违纪类型
			changeType(e) {
				this.typeDetailList = []
				this.violationDetil = ''
				teachClass.getDictByType(e).then(res => {
					console.log(res)
					res.data.forEach(item => {
						let obj = {}
						obj.value = item.dictValue
						obj.text = item.dictLabel
						this.typeDetailList.push(obj)
					})
				})
				console.log()
			},
			clickImg(img) {
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			
			checkBtnCheck() {
				this.checkStatusBtn = !this.checkStatusBtn
				if (this.checkStatusBtn) {
					this.dormitoryAttendanceArr.forEach((item) => {
						if (item.attenceStatus != 4) {
							item.checkBtn = true
						}
					})
				} else {
					this.dormitoryAttendanceArr.forEach((item) => {
						if (item.attenceStatus != 4) {
							item.checkBtn = false
						}
					})
				}
				this.$forceUpdate()
			},
			changeFun(e, item) {
				item.checkBtn = !item.checkBtn
				if (item.checkBtn == false) {
					this.checkStatusBtn = false
				}
				this.$forceUpdate()
			},
			checkOnclick(item) {
				this.getAppStuInfoById(item.studentNo)
				this.dormitoryAttendanceArr.forEach((item, index) => {
					item.isShow = false
				})
				item.isShow = true
			},

		},
		onLoad(options) {
			this.dormitoryId = options.dormitoryId
		
			this.userName = uni.getStorageSync("userName")
			
			teachClass.getDictByType('violation_content').then(res => {
				this.violationContent = res.data
				// res.data.forEach(item => {
				// 	let obj = {}
				// 	obj.value = item.dictValue
				// 	obj.text = item.dictLabel
				// 	this.violationContent.push(obj)
				// })
			})
		},
		mounted() {
			this.getAppStudentListByDId()
		},
	}
</script>

<style>
	.text-box {
		margin-bottom: 10rpx;
		padding: 20rpx;
		width: 28vh;
		display: flex;
		min-height: 30%;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		color: #353535;
		line-height: 1.8;
	}
	
	.timePos {
		position: relative;
		top: 20rpx;
		right: 0px;
		background: white;
		border-radius: 20rpx;
		/* padding:20rpx; */
		margin-bottom: 20rpx;
		font-size: 32rpx;
		min-height: 230px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.displayStudentInfo {
			position: absolute;
			top: 0rpx;
			right: 20rpx;
			width: 65%;
			height: 100rpx;
			box-shadow: 0upx 0upx 10upx 0upx #8F8F94;
			padding-top: 20rpx;
			padding-bottom: 280rpx;
			border-radius: 20rpx;
			/* padding-left: 50rpx; */
			/* border:1px #999999 solid; */
	}
	.indexContent {
		height: 100vh;
	}

	.character {
		font-size: 24rpx;
		/* color: #979999; */
		color: #000;
	}

	::v-deep .file-picker__box[data-v-4c5c5653] {
		/* 		position: absolute;
		left: 20%;
		transform: translateX(-50%);
		top: 50%; */
	}

	.line {
		width: 1%;
		background-color: #3333d3;
		height: 5rpx;
		padding: 0 5rpx;
		margin-left: 5rpx;
	}

	.cancel {
		width: 35%;
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}
	
	.repCheckout {
		display: flex;
		/* justify-content: space-between; */
		align-content: center;
		flex-wrap: wrap;
		font-size: 36rpx;
		color: #808080;
		width: 100%;
		margin-bottom: 20rpx;
	
		/* margin-left:50upx; */
	}

	.tijiao {
		width: 35%;
		background-color: #ff009a;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	/* ::v-deep .uni-stat__actived[data-v-6b64008e] {
		width: 200rpx;
	} */

	::v-deep .uni-stat__actived[data-v-6b64008e] {
		width: 210rpx;
	}

	::v-deep .uni-select[data-v-6b64008e] {
		width: 210rpx;
	}
</style>